<template>
  <view class="content">
    <view class="listcontent" v-for="shop in shops" :key="shop.id" @click="shopclick(shop._id)">
      <view class="shop-card">
        <view class="shop-img">
          <img :src="`/static/${shop.imgUrl}`" style=" width: 80px; height: 80px;"  />
        </view>
        <view class="shop-info">
          <text class="shop-name">{{shop.name}}</text>
          <view class="shop-details">
            <view class="detail-item">月售：{{shop.sales}}</view>
            <view class="detail-item">起送：{{shop.expressLimit}}</view>
            <view class="detail-item">基础运费：{{shop.expressPrice}}</view>
          </view>
          <text class="shop-slogan">{{shop.slogan}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import config from '@/config'
export default {
  data() {
    return {
      shops: [],
    };
  },
  onLoad(options) {
    this.showdata();
  },
  methods: {
    showdata(id) {
      uni.request({
        url: config.API+`/hotList`,
        success: (res) => {
          this.shops = res.data;
        },
      });
    },
    shopclick(id) {
      console.log(id);
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`,
      });
    },
  },
};
</script>

<style scoped>
.content {
  padding: 20px;
}

.shop-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px; /* 将内边距从20px改为10px，降低卡片高度 */
  margin-bottom: 20px;
  transition: transform 0.2s ease-in-out;
}

.shop-card:hover {
  transform: translateY(-5px);
}

.shop-img {
  margin-right: 20px;
 
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px; /* 适当减小底部外边距 */
}

.shop-details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 5px; /* 适当减小底部外边距 */
}

.detail-item {
  font-size: 16px;
  color: #666;
  margin-right: 20px;
  margin-bottom: 5px;
}

.shop-slogan {
  font-size: 18px;
  color: red;
}
</style>